import { View, Image, Text } from "@tarojs/components";
import classNames from "classnames";
import Icon from "./Components/Icon";
import IconFont from "@shared/components/IconFont";
import Spacer from "./Components/Spacer";
import eatIn from "@shared/assets/eatIn.png";
import takeout from "@shared/assets/takeout.png";
import "./index.scss";

export const OrderTypes = {
  PICK_UP: 4, // 自提
  EAT_IN: 2, // 堂食小吃
  SCAN_TABLE: 2, // 堂食正餐
  TAKE_OUT: 3, //外卖
} as const;
export type MenuType = keyof typeof OrderTypes;

export const OrderTypeNames = {
  [OrderTypes["EAT_IN"]]: "堂食",
  [OrderTypes["PICK_UP"]]: "自取",
  [OrderTypes["TAKE_OUT"]]: "外卖",
};

export function MenuTypeSelector({
  type,
  onChange,
}: {
  type: MenuType;
  onChange?: (val: MenuType) => void;
}) {
  return (
    <View
      className="flex items-stretch justify-end"
      style={{ width: "638rpx", height: "114rpx" }}
    >
      <View
        className={classNames("flex flex-row center relative", "testbg")}
        style={{
          borderWidth: type === "EAT_IN" ? "2px" : "0.5px",
          borderStyle: "solid",
          borderRadius: "4px",
          borderColor: type === "EAT_IN" ? "#E10600" : "#B8B8B8",
          width: "302rpx",
        }}
        onClick={() => {
          onChange?.("EAT_IN");
        }}
        hoverClass="clicked"
        hoverStartTime={0}
        hoverStayTime={100}
      >
        <Image
          src={eatIn}
          style={{
            width: "80rpx",
            height: "70rpx",
            marginRight: "10px",
            padding: "11px 0 11px 12px",
          }}
        ></Image>
        <View className="flex flex-col py-3">
          <Text className="font-600" style={{ fontSize: "15px" }}>
            堂食
          </Text>
          <Text style={{ color: "#999999", fontSize: "11px" }}>店内就餐</Text>
        </View>
        {type === "EAT_IN" && (
          <IconFont
            icon={"icon-tianjia"}
            className={classNames(
              "absolute text-primary bg-white rounded-full"
            )}
            size="16"
            style={{
              top: "-8px",
              right: "-8px",
            }}
            color="E10600"
          />
        )}
      </View>
      <Spacer />
      <View
        className={classNames(
          "flex flex-row center relative",
          type === "PICK_UP" ? "scale-animation" : ""
        )}
        style={{
          // borderWidth: type === "PICK_UP" ? "2px" : "0.5px",
          // borderStyle: "solid",
          // borderRadius: "4px",
          // borderColor: type === "PICK_UP" ? "#E10600" : "#B8B8B8",
          // width: "302rpx",
          borderWidth: "0.5px",
          borderStyle: "solid",
          borderRadius: "4px",
          borderColor: "#B8B8B8",
          width: "302rpx",
        }}
        onClick={() => {
          onChange?.("PICK_UP");
        }}
        hoverClass="clicked"
        hoverStartTime={0}
        hoverStayTime={100}
      >
        <Image
          src={takeout}
          style={{
            width: "80rpx",
            height: "70rpx",
            marginRight: "10px",
            padding: "11px 0 11px 12px",
          }}
        ></Image>
        <View className="flex flex-col py-3">
          <Text className="font-600" style={{ fontSize: "15px" }}>
            {OrderTypeNames[OrderTypes.PICK_UP]}
          </Text>
          <Text style={{ color: "#999999", fontSize: "11px" }}>打包带走</Text>
        </View>
        {type === "PICK_UP" && (
          <IconFont
            icon={"icon-tianjia"}
            className={classNames(
              "absolute text-primary bg-white rounded-full"
            )}
            size="16"
            style={{
              top: "-8px",
              right: "-8px",
            }}
            color="E10600"
          />
        )}
      </View>
    </View>
  );
}
